<template>
  <div class="homeContainer__right__businessData">
    <div class="homeContainer__right__businessData__top">
      <div class="homeContainer__right__businessData__top__title">
        <el-icon class="homeContainer__right__businessData__top__title__icon"
          ><DataLine
        /></el-icon>
        <span>经营数据</span>
      </div>
      <div class="homeContainer__right__businessData__top__date">
        选择日期:
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="To"
          start-placeholder="Start date"
          end-placeholder="End date"
        />
      </div>
    </div>
    <el-divider style="border-color: #1e98ea" />
    <div class="homeContainer__right__businessData__bottom">
      <div
        class="homeContainer__right__businessData__bottom__items"
        v-for="(item, index) of businessDataListItems"
        :key="index"
        :style="{ backgroundColor: item.bgColor }"
        ref="businessBoxs"
        @mouseover="moveHandler"
      >
        <div class="homeContainer__right__businessData__bottom__items__left">
          <div
            class="homeContainer__right__businessData__bottom__items__left__title"
          >
            {{ item.title }}
          </div>
          <div
            class="homeContainer__right__businessData__bottom__items__left__money"
          >
            {{ item.num }}
          </div>
        </div>
        <div
          class="homeContainer__right__businessData__bottom__items__right iconfont"
          v-html="item.icon"
        ></div>
      </div>
    </div>
  </div>
  <div class="homeContainer__right__details">
    <div class="homeContainer__right__details__leftBox">
      <div class="homeContainer__right__details__leftBox__top">
        <el-icon class="homeContainer__right__details__leftBox__top__icon"
          ><DataLine
        /></el-icon>
        <div class="homeContainer__right__details__leftBox__top__title">
          商品概况
        </div>
      </div>
      <el-divider style="border-color: #1e98ea" />
      <div class="homeContainer__right__details__leftBox__bottom">
        <div
          class="homeContainer__right__details__leftBox__bottom__items"
          v-for="item of goodsDetailsitems"
          :key="item.id"
        >
          <div
            class="homeContainer__right__details__leftBox__bottom__items__titleBox"
          >
            <div
              class="homeContainer__right__details__leftBox__bottom__items__titleBox__text"
            >
              {{ item.tilte }}
            </div>
            <el-icon
              class="homeContainer__right__details__leftBox__bottom__items__titleBox__help iconfont"
              ><QuestionFilled
            /></el-icon>
          </div>
          <div
            class="homeContainer__right__details__leftBox__bottom__items__numBox"
          >
            <span v-if="item.id === 3">
              {{ item.unit + item.num }}
            </span>
            <span v-else>
              {{ item.num + item.unit }}
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="homeContainer__right__details__rightBox">
      <div class="homeContainer__right__details__rightBox__top">
        <el-icon class="homeContainer__right__details__rightBox__top__icon"
          ><DataLine
        /></el-icon>
        <div class="homeContainer__right__details__rightBox__top__title">
          商品概况
        </div>
      </div>
      <el-divider style="border-color: #1e98ea" />
      <div class="homeContainer__right__details__rightBox__bottom">
        <div
          class="homeContainer__right__details__rightBox__bottom__items"
          v-for="item of userDetailsitems"
          :key="item.id"
        >
          <div
            class="homeContainer__right__details__rightBox__bottom__items__titleBox"
          >
            <div
              class="homeContainer__right__details__rightBox__bottom__items__titleBox__text"
            >
              {{ item.tilte }}
            </div>
            <el-icon
              class="homeContainer__right__details__rightBox__bottom__items__titleBox__help iconfont"
              ><QuestionFilled
            /></el-icon>
          </div>
          <div
            class="homeContainer__right__details__rightBox__bottom__items__numBox"
          >
            {{ item.num }}
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="homeContainer__right__bottomBox">
    <div class="homeContainer__right__bottomBox__left">
      <div class="homeContainer__right__bottomBox__left__title">
        运营快捷入口
      </div>
      <el-icon class="homeContainer__right__bottomBox__left__icon"
        ><CaretRight
      /></el-icon>
    </div>
    <el-divider
      direction="vertical"
      style="height: 85%; background-color: #c9c9c9"
    />
    <div class="homeContainer__right__bottomBox__right">
      <div class="homeContainer__right__bottomBox__right__items">
        <el-icon><Shop /></el-icon>
      </div>
      <div class="homeContainer__right__bottomBox__right__items">
        <el-icon><Ticket /></el-icon>
      </div>
      <div class="homeContainer__right__bottomBox__right__items">
        <el-icon><List /></el-icon>
      </div>
      <div class="homeContainer__right__bottomBox__right__items">
        <el-icon><UserFilled /></el-icon>
      </div>
      <div class="homeContainer__right__bottomBox__right__items">
        <el-icon><Histogram /></el-icon>
      </div>
      <div class="homeContainer__right__bottomBox__right__items">
        <el-icon><Money /></el-icon>
      </div>
      <div class="homeContainer__right__bottomBox__right__items">
        <el-icon><VideoCameraFilled /></el-icon>
      </div>
      <div class="homeContainer__right__bottomBox__right__items">
        <el-icon><Platform /></el-icon>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import {
  Menu as IconMenu,
  Shop,
  Ticket,
  List,
  UserFilled,
  Histogram,
  Money,
  VideoCameraFilled,
  Platform,
  DataLine,
  QuestionFilled,
  CaretRight,
} from "@element-plus/icons-vue";

const value1 = ref("");
const businessDataListItems = ref([
  {
    bgColor: "#34cc5f",
    title: "今日订单余额(元)",
    num: "1000.00",
    icon: "&#xe749;",
  },
  {
    bgColor: "#9150e8",
    title: "今日订单总数",
    num: "100",
    icon: "&#xe616;",
  },
  {
    bgColor: "#458efd",
    title: "今日实收",
    num: "265.33",
    icon: "&#xe749;",
  },
  {
    bgColor: "#ff7823",
    title: "现金红包佣金",
    num: "256",
    icon: "&#xe870;",
  },
  {
    bgColor: "#fd4566",
    title: "门店分佣",
    num: "25623",
    icon: "&#xe649;",
  },
]);
const userDetailsitems = ref([
  {
    id: 1,
    tilte: "今日访问量",
    num: 100,
  },
  {
    id: 2,
    tilte: "新增用户数",
    num: 500,
  },
  {
    id: 3,
    tilte: "累计用户数",
    num: 1000,
  },
]);
const goodsDetailsitems = ref([
  {
    id: 1,
    tilte: "上架商品数",
    num: 80,
    unit: "款",
  },
  {
    id: 2,
    tilte: "销售商品件数",
    num: 100,
    unit: "件",
  },
  {
    id: 3,
    tilte: "销售商品总额",
    num: 20000,
    unit: "￥",
  },
]);
const shortcuts = [
  {
    text: "Last week",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "Last month",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: "Last 3 months",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];
</script>
<style lang="scss" scoped>
.homeContainer__right {
  &__businessData {
    width: 95%;
    min-width: 1200px;
    height: 280px;
    background-color: #fff;
    margin: 20px 0 25px 0;
    transition: all 0.3s;
    border-radius: 5px;
    box-shadow: 0 3px 6px #b1acac;
    &:hover {
      box-shadow: 0 6px 12px #00152968;
    }
    &__top {
      display: flex;
      justify-content: space-between;
      padding: 20px 10px 0 10px;
      box-sizing: border-box;
      &__title {
        display: flex;
        font-size: 14px;
        align-items: center;
        &__icon {
          font-size: 20px;
          margin-right: 5px;
          color: #68bbc4;
        }
      }
    }
    &__bottom {
      display: flex;
      justify-content: space-around;
      padding-top: 20px;
      box-sizing: border-box;
      &__items {
        width: 220px;
        height: 120px;
        background-color: #68bbc4;
        display: flex;
        justify-content: space-around;
        padding: 0 30px;
        box-sizing: border-box;
        align-items: center;
        color: #fff;
        &__left {
          &__money {
            margin-top: 20px;
          }
        }
        &__right {
          font-size: 55px;
        }
      }
    }
  }
  &__details {
    width: 95%;
    min-width: 1200px;
    display: flex;
    justify-content: space-between;
    &__leftBox {
      width: 49%;
      height: 250px;
      background-color: #fff;
      transition: all 0.3s;
      border-radius: 5px;
      box-sizing: border-box;
      padding: 10px 20px;
      box-shadow: 0 3px 6px #b1acac;

      &:hover {
        box-shadow: 0 6px 12px #00152968;
      }
      &__top {
        font-size: 14px;
        display: flex;
        padding: 20px 10px 0 10px;

        &__icon {
          font-size: 20px;
          margin-right: 5px;
          color: #68bbc4;
        }
      }
      &__bottom {
        display: flex;
        justify-content: space-around;
        padding-top: 10px;
        box-sizing: border-box;
        &__items {
          width: 180px;
          height: 100px;
          display: flex;
          border: solid 1px #ccc;
          border-radius: 10px;
          flex-direction: column;
          justify-content: space-between;
          box-sizing: border-box;
          padding: 10px;
          &__titleBox {
            display: flex;
            justify-content: space-between;
            align-items: center;
            &__help {
              color: #c9c9c9;
            }
          }
          &__numBox {
            padding-left: 15px;
            font-size: 22px;
          }
        }
      }
    }
    &__rightBox {
      width: 49%;
      height: 250px;
      background-color: #fff;
      transition: all 0.3s;
      border-radius: 5px;
      box-sizing: border-box;
      padding: 10px;
      box-shadow: 0 3px 6px #b1acac;

      &:hover {
        box-shadow: 0 6px 12px #00152968;
      }
      &__top {
        font-size: 14px;
        display: flex;
        padding: 20px 10px 0 10px;

        &__icon {
          font-size: 20px;
          margin-right: 5px;
          color: #68bbc4;
        }
      }
      &__bottom {
        display: flex;
        justify-content: space-around;
        padding-top: 10px;
        box-sizing: border-box;
        &__items {
          width: 180px;
          height: 100px;
          display: flex;
          border: solid 1px #ccc;
          border-radius: 10px;
          flex-direction: column;
          justify-content: space-between;
          box-sizing: border-box;
          padding: 10px;
          &__titleBox {
            display: flex;
            justify-content: space-between;
            align-items: center;
            &__help {
              color: #c9c9c9;
            }
          }
          &__numBox {
            padding-left: 15px;
            font-size: 22px;
          }
        }
      }
    }
  }
  &__bottomBox {
    width: 95%;
    height: 200px;
    background-color: #fff;
    margin-top: 30px;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    transition: all 0.3s;
    box-sizing: border-box;
    border-radius: 5px;
    box-shadow: 0 3px 6px #b1acac;

    &:hover {
      box-shadow: 0 6px 12px #00152968;
    }
    &__left {
      display: flex;
      align-items: center;
      height: 100%;
      &__title {
        width: 20px;
        font-size: 16px;
        text-align: center;
      }
      &__icon {
        color: #c9c9c9;
        font-size: 30px;
        margin-left: 10px;
      }
    }
    &__right {
      color: #6a8bf2;
      display: flex;
      &__items {
        width: 70px;
        height: 70px;
        border: 1px solid #c9c9c9;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 35px;
        margin: 0 10px;
        border-radius: 10px;
        cursor: pointer;
      }
    }
  }
}
</style>
